/*
* 饼图
*
*/

import React, { useEffect } from 'react';
import * as echarts from 'echarts';

const PieChart = ({id='', data = [], title=''}) => {

	useEffect(() => {

		return () => {}
	}, [])

	useEffect(() => {
		initChart()
		return () => {}
	}, [data])


	// 初始化图表
	const initChart = () => {
		if (data.length===0) return ;
		let chartDom = document.getElementById(id);
		let myChart = echarts.init(chartDom);
		let option = {
			title: null,
			tooltip: {
				trigger: 'item'
			},
			legend: null,
			series: [
				{
					name: title,
					type: 'pie',
					radius: '50%',
					data: data,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};

		option && myChart.setOption(option);
	}

	// header高7vh
	return (
		<div id={id} style={{width: '100%', height: '100%'}} >

		</div>
	);
};

export default PieChart;
